<template>
  <div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      show-overflow-tooltip
      fit
      table-layout="auto"
    >
      <el-table-column label="序号" />

      <el-table-column label="学员姓名" width="80">
        <template #default="scope">{{ scope.row.name }}</template>
      </el-table-column>

      <el-table-column label="身份证号" width="180">
        <template #default="scope">{{ scope.row.cardId }}</template>
      </el-table-column>

      <el-table-column label="科目" width="120">
        <template #default="scope">{{ scope.row.subject }}</template>
      </el-table-column>

      <el-table-column label="当前进度" width="120">
        <template #default="scope">{{ scope.row.subjectState }}</template>
      </el-table-column>
      <el-table-column label="发生时间" width="120">
        <template #default="scope">{{ scope.row.subjectState }}</template>
      </el-table-column>

      <el-table-column label="预考次数" width="120">
        <template #default="scope">{{ scope.row.state }}</template>
      </el-table-column>

      <el-table-column label="当前教练" width="100">
        <template #default="scope">{{ scope.row.school }}</template>
      </el-table-column>

      <el-table-column label="生成时间" width="120">
        <template #default="scope">{{ scope.row.isIndigen }}</template>
      </el-table-column>

      <el-table-column label="完成时间" width="310">
        <template #default="scope">{{ scope.row.address }}</template>
      </el-table-column>

      <el-table-column label="备注" width="100">
        <template #default="scope">{{ scope.row.Regtime }}</template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="250">
        <template #default>
          <el-button type="primary" round size="small"> 详情</el-button>
          <el-button type="success" round size="small">缴费</el-button>
          <el-button type="warning" round size="small">更多</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="locale">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import locale from "element-plus/es/locale/lang/zh-cn";
import { ref } from "vue";
import { stuExamInfoGet } from "../../../api/student";
// 分页条
const currentPage = ref(1);
// 每页显示条数
const pageSize = ref(5);
const total = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  stuExamInfoGet(currentPage.value, val).then((res) => {
    tableData.value = res.data.results;
    total.value = res.data.count;
  });
};
const handleCurrentChange = (val: number) => {
  // console.log(`当前页码: ${val}`)
  currentPage.value = val;
  stuExamInfoGet(val, pageSize.value).then((res) => {
    console.log(res);
    tableData.value = res.data.results;
    total.value = res.data.count;
  });
};

const tableData = ref<any>(null);
</script>

<style scoped>
</style>